import React from 'react';
import styled from '@emotion/styled'
import { css, keyframes } from '@emotion/core'
// import Css from './Css';
import Demo from './demo'
import { useTheme } from 'emotion-theming'

// const style = css`
//   width: 100px;
//   height: 100px;
//   background: pink
// `
// const style = css({
//   width: 100,
//   height: 100,
//   background: 'pink'
// })

// function App() {
//   return <div>
//     <Css css={style} />
//   </div>;
// }


// const Button = styled.button`
//   width: 100px;
//   height: 30px;
//   background: ${props => props.bgColor || 'skyBlue'};
// `

// // const Container = styled.div(props => ({
// //   width: props.w || 1000,
// //   background: 'pink',
// //   margin: '0 auto'
// // }))
// // 两种写法都可以
// const Container = styled.div({
//   width:1000,
//   background: 'pink',
//   margin: '0 auto'
// }, props => ({
//   width: props.w
// }))

// function App() {
//   // 如果传递的是字符串则需要带上 px
//   return <Container w={500}>
//    <Button bgColor="blue">我是按钮</Button>
//   </Container>;
// }

// function Demo ({className}) {
//   return <div className={className}>Demo</div>
// }

// // 样式会传入 props 中的 className 
// const Fancy = styled(Demo)`
//   color: red
// `

// const Fancy2 = styled(Demo)({
//   background: 'red'
// })

// function App () {
//   return <div>
//     <Fancy/>
//     <Fancy2/>
//   </div>
// }


// const Child = styled.div`
//   color: red
// `

// const Parent = styled.div`
//   ${Child} {
//     color: blue
//   }
// `

// const Parent2 = styled.div({
//   [Child]: {
//     color: 'pink'
//   }
// })

// function App () {
//   return <div>
//     <Child>Child</Child>
//     <Parent>
//       <Child>Child</Child>
//     </Parent>
//     <Parent2>
//       <Child>Child</Child>
//     </Parent2>
//   </div>
// }


// const Container = styled.div`
//   width: 200px;
//   height: 200px;
//   background: skyblue;
//   color: pink;
//   & : hover {
//     background: pink
//   }
//   & > span {
//     color: yellow
//   }
// `

// function App () {
//   return <div>
//   <Container >
//     123
//     <span>123</span>
//   </Container>
//   </div>
// }


// const Button = styled.button`
//   color: red
// `

// function App () {
//   return <div>
//     {/* styled.button => styled.a */}
//     <Button as="a">button</Button>
//   </div>
// }


// const base = css`
//   background: tomato;
//   color: white
// `

// const danger = css`
//   background: black;
//   color: red
// `

// function App () {
//   // danger 样式优先级高于 base 
//   return <div css={[base, danger]}>App</div>
// }


// const styles = css`
//   body {
//     margin: 0
//   }
//   a {
//     text-decoration: none;
//     color: red
//   }
// `

// function App () {
//   return <div>
//     <Global styles={styles} />
//     <a href="#">a标签</a>
//     <Demo />
//   </div>
// }


// const move = keyframes`
//   0% {
//     background: skyblue;
//     left: 0;
//     top: 0
//   }
//   100% {
//     background: tomato;
//     left: 600px;
//     top: 300px
//   }
// `

// const box = css`
//   width: 100px;
//   height: 100px;
//   position: absolute;
//   animation: ${move} 2s ease infinite alternate
// `

// function App () {
//   return <div css={box}>App</div>
// }

// 如果需要用到主题中的值
// 方式一：css 样式需要写成函数，有 props 形参
const promaryColor = props => css`
  color: ${props.colors.primary}
`

function App () {
  // 方式二：使用 emotion-theming 提供的 useTheme 方法，返回值就是主题对象
  console.log(useTheme())
  return <div css={promaryColor}>App</div>
}

export default App;